<template>
  <ElementDialog ref="dialog" embed :visible="visible" center height="50vh" :title="title" width="500px">
    <DepartmentTree
      :id="id"
      ref="tree"
      :check-strictly="checkStrictly"
      :ignore="ignore"
      :pre-selected-users="preSelectedUsers"
      :is-multiple="isMultiple"
      :ou-type="ouType" />
    <template #footer>
      <ElButton size="mini" type="primary" @click="onBtnOkClick">确 定</ElButton>
      <ElButton size="mini" @click="onCloseClick">取 消</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  import DepartmentTree from './DepartmentTree.vue'

  export default {
    name: 'DepartmentPicker',
    components: { DepartmentTree },
    props: {
      title: {
        type: String,
        default: '选择组织架构'
      },
      visible: Boolean,
      checkStrictly: Boolean,
      isMultiple: {
        type: Boolean,
        default: false
      },
      ignore: {
        type: Boolean,
        default: false
      },
      ouType: {
        type: String,
        default: ''
      },
      id: {
        type: String,
        default: '-1'
      },
      preSelectedUsers: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      onBtnOkClick() {
        const nodes = this.$refs.tree.getCheckedNodes()
        if (!nodes) {
          this.$message.error({ message: '请选择部门！', duration: 2000 })
          return
        }
        this.$emit('confirm', nodes)
        this.$refs.tree.$refs.tree.setCheckedKeys([])
        this.$refs.dialog.hide()
      },
      onCloseClick() {
        this.$refs.tree.$refs.tree.setCheckedKeys([])
        this.$emit('cancel')
        this.$refs.dialog.hide()
      }
    }
  }
</script>

<style lang="scss">
  .select-ou-info {
    .el-dialog__footer {
      padding-bottom: 10px;
    }
  }
</style>
